<template>
  <div class="home">
    <!-- 轮播图 -->
    <!-- interval 切换图片的时间 autoplay 自动播放 loop 循环播放-->
    <el-carousel
      :interval="4000"
      type="card"
      height="300px"
      :autoplay="true"
      :loop="true"
    >
      <!-- 要显示图片 循环遍历图片 banners _id图片的唯一标识-->
      <el-carousel-item v-for="item in banners" :key="item._id">
        <!-- 图片的地址 product_pic_url -->
        <router-link :to="{ name: 'detail', query: { menuId: item.menuId } }">
          <img :src="item.product_pic_url" alt="" />
        </router-link>
      </el-carousel-item>
    </el-carousel>

    <!-- 内容精选 瀑布流形式 start -->
    <el-main>
      <h2>内容精选</h2>
      <Waterfall @loading-more="loadingMoreHandle" ref="waterfall">
        <MenuCard :info="menus"></MenuCard>
      </Waterfall>
    </el-main>
  </div>
</template>

<script>
import getBanner from "@/apis/banner.js";
import { getMenus, getComments } from "@/apis/menu.js";
import MenuCard from "@/components/MenuCard.vue";
import Waterfall from "@/components/Waterfall.vue";

export default {
  name: "HomeView",

  // 注册组件
  components: {
    Waterfall,
    MenuCard,
  },
  data() {
    return {
      // 广告条的数据
      banners: [],
      // 菜单数组
      menus: [],
      // 页码，初始值为1
      page: 1,
      pages: 0,
    };
  },
  methods: {
    loadingMoreHandle() {
      // console.log("在homeView中监听到加载更多。。。");
      // 1. 判断当前页是否是最后一页，总页数？
      if (this.page >= this.pages) {
        // 已经是最后一页
        // 隐藏加载更多图标
        this.$refs.waterfall.isLoading = false;
        // this.$message.info("已加载完所有数据！！！");
        // 其他事情不做直接脱出程序
        return;
      }
      // 获取下一页内容，将页码加1
      this.page++;
      // 加载内容 传下一页的页码
      getMenus({ page: this.page }).then(async (res) => {
        // 获取list
        const { list } = res.data;

        for (let i = 0; i < this.menus.length; i++) {
          const comments = await getComments({ menuId: this.menus[i].menuId });
          this.menus[i].comments_len = comments.data.comments.length;
        }

        // 需要将list数组中的数据添加到menus中
        this.menus.push(...list);
        // 隐藏加载更多
        this.$refs.waterfall.isLoading = false;
      });
    },
  },
  // 页面挂载前
  mounted() {
    // 获取广告数据
    getBanner().then((res) => {
      // console.log(res);
      // 获取数据并赋值
      this.banners = res.data.list;
    });

    // 获取菜单数据
    getMenus({ page: this.page }).then(async (res) => {
      // console.log(res);
      // 获取数据并赋值
      this.menus = res.data.list;
      for (let i = 0; i < this.menus.length; i++) {
        const comments = await getComments({ menuId: this.menus[i].menuId });
        this.menus[i].comments_len = comments.data.comments.length;
      }
      // 设定总页数
      const pages = Math.ceil(res.data.total / res.data.page_size);
      this.pages = pages;
    });
  },
};
</script>

<style lang="stylus" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel__item img {
  width: 100%;
}

.el-main {
  width: 100%;
}

.el-main h2 {
  text-align: center;
}
</style>
